<template>
  <div>
    <my-button v-for="n in 5" :key="'mybutton' + n"></my-button>
    <!--    v-for和  v-if 不能写在同一个标签内 -->
    <template v-for="n in 10" :key="n">
      <p v-if="n % 2 === 0">aaaaaaaaaaaaaaaaa {{ n }}</p>
    </template>
    <!-- <span v-for="n in 10" :key="n">
      <p>aaaaaaaaaaaaaaaaa</p>
    </span> -->
    <!-- <ul>
      <li v-for="(v , k , index  )  in  myObject " :key="'myObject' +  index">
          {{   v   }} - {{ k  }}  -  {{  index    }}
      </li>
    </ul> -->

    <!-- <ol>
      <li :key="'aa' + index"  v-for="(item, index) in items" >
        {{ parentMessage }} - {{ index }} - {{ item.message }}
        <p v-for="(str,innner_index)  in item.    " :key="'p' +  innner_index">
        {{   str  }}
        </p>
      </li>
    </ol> -->
  </div>
</template>
<script setup>
import { computed, ref } from "vue";

import MyButton from "./components/MyButton.vue";

const parentMessage = ref("Parent");
const items = ref([
  { message: "Foo", children: ["aa", "bb"] },
  { message: "Bar", children: ["aa", "bb"] },
]);

const myObject = ref({
  // 既是对象，又是hashmap
  title: "How to do lists in Vue",
  author: "Jane Doe",
  publishedAt: "2016-04-10",
});
</script>
